import React, { Component } from "react";
import "./index.css";
import axios from "../../utils/axios";

//1. 安装与导入
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default class Website extends Component {
    state = {
        title: "",
        url: "",
        keywords: "",
        //保存所有的网址  一定要使用 []
        websites: [],
        //是否双击
        hasDC: false, 
        //双击元素的网址 id
        dcID: 0
    };

    render() {
        //解构赋值
        let { title, url, keywords, hasDC, dcID } = this.state;

        return (
            <div className="website-container">
                {/* 2. 添加容器组件 */}
                <ToastContainer />
                <h2>网址管理</h2>
                <hr />
                <div className="form">
                    名称:{" "}
                    <input
                        type="text"
                        value={title}
                        name="title"
                        onChange={this.saveData}
                    />
                    &nbsp; 网址:{" "}
                    <input
                        type="text"
                        value={url}
                        name="url"
                        onChange={this.saveData}
                    />
                    &nbsp; 关键字:{" "}
                    <input
                        type="text"
                        value={keywords}
                        name="keywords"
                        onChange={this.saveData}
                    />
                    &nbsp;
                    <button onClick={this.add}>新增</button>
                </div>
                <hr />
                <div className="search">
                    <input type="text" ref={(el) => (this.k = el)} />
                    &nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
                <hr />
                <div className="table">
                    <table border="1" width="100%">
                        <thead>
                            <tr>
                                <td>ID</td>
                                <td>名称</td>
                                <td>网址</td>
                                <td>关键字</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.websites.map((item) => {
                                return (
                                    <tr key={item.id}>
                                        <td>{item.id}</td>
                                        <td>{item.title}</td>
                                        <td onDoubleClick={
                                            this.doubleClick(item.id)
                                        }> 
                                            {hasDC && dcID === item.id 
                                                ? <input onBlur={this.update} defaultValue={item.url} autoFocus={true}/> 
                                                : item.url 
                                            } 
                                        </td>
                                        <td>{item.keywords}</td>
                                        <td>
                                            <button
                                                onClick={this.delete(item.id)}
                                            >
                                                删除
                                            </button>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }

    //更新网址
    update = async (e) => {
        let {websites} = this.state;
        //获取用户新输入的网址
        let v = e.target.value;
        //更新的 id
        let id = this.state.dcID;

        //发送 AJAX 请求 更新  put patch(√)
        let result = await axios.patch('/website/'+id, {url: v});
        // 3. 调用方法 提示
        toast.success("更新成功", {
            position: toast.POSITION.TOP_CENTER,
        });
        //操作成功, 更新网址列表
        this.setState({
            websites: websites.map(item => {
                //判断 如果我的 id 跟正在更新的 id 一样
                if(item.id === id){
                    return result;
                }
                return item;
            })
        })
        

        //更新状态
        this.setState({
            hasDC: false, 
            dcID: 0
        })


    }

    //双击更新状态 显示输入框
    doubleClick = (id) => {
        return () => {
            //修改状态
            this.setState({
                hasDC: true,
                dcID: id
            })
        }
    }

    //删除网址
    delete = (id) => {
        return async () => {
            //确认  如果点击取消, 则停止后续代码的执行
            if(!window.confirm('你确定要删除该网址么??')) return; 

            //解构赋值
            let {websites} = this.state;
            //发送请求删除网址
            await axios.delete(
                "/website/" + id
            ); // params 传参
            //更新列表
            this.setState({
                //过滤元素  保留 item.id 与要删除 id 不相等的元素
                websites: websites.filter(item => item.id !== id) 
            })
            //删除成功
            toast.success("删除成功", {
                position: toast.POSITION.TOP_CENTER,
            });
            
        };
    };

    //新增方法 搜索关键字 http://localhost:3001/website?q=a
    search = async () => {
        //获取 input 中输入的关键字
        let v = this.k.value;
        //发送请求获取相关的网址
        // let result = await axios('http://127.0.0.1:3001/website?q='+v);
        let  data  = await axios("/website", {
            params: {
                //query 传参
                q: v,
            },
        });
        //更新显示列表
        this.setState({
            websites: data,
        });
    };

    //针对受控组件值的修改
    saveData = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    //新增网址
    add = async () => {
    //解构赋值
    let { title, url, keywords, websites } = this.state;
        //发送请求
        let data  = await axios.post("/website", {
            title,
            url,
            keywords,
        });
        //更新列表
        this.setState({
            // ...websites 展开数据  新增
            websites: [...websites, data],
            //清空 input 的值
            title: "",
            url: "",
            keywords: "",
        });

        // 3. 调用方法 提示
        toast.success("添加成功", {
            position: toast.POSITION.TOP_CENTER,
        });
    };

    //组件挂载完毕
    async componentDidMount() {
        //获取所有的网址数据, 解构赋值, 获取响应体
        let data = await axios("/website");
        //保存数据
        this.setState({
            websites: data,
        });

        //增加轮训 每过 2s 刷新一次
        // this.timer = setInterval(async () => {
        //     //获取所有的网址数据, 解构赋值, 获取响应体
        //     let data = await axios("/website");
        //     //保存数据
        //     this.setState({
        //         websites: data,
        //     });
        // }, 2000)
    }

    componentWillUnmount(){
        // clearInterval(this.timer);
    }
}
